<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.title" clearable style="width: 190px;" placeholder="商品名/编码" />
      <el-select v-model="listQuery.warehouseId" clearable style="width: 200px" placeholder="请选择仓库" >
        <el-option v-for="(item,index) in warehouseList" :key="index" :label="item.warehouseName" :value="item.id" />
      </el-select>
      <el-date-picker
        v-model="listQuery.timeInfo"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
        <!-- 使用expireTimeOption方法 -->
      </el-date-picker>
      <el-button
        v-permission="['warehouse:warehouseoperlog:query']"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="white-space: pre-line"
    >
      <el-table-column prop="orderNo" align="center" label="单据编号"/>
      <el-table-column align="center" label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.spuName + "" +scope.row.skuName }}
        </template>
      </el-table-column>
      <el-table-column prop="spuId" align="center" label="商品编号"/>
      <el-table-column prop="skuNo" align="center" label="条形码"/>
      <el-table-column prop="changeSkuStock" align="center" label="变化数量"/>
      <el-table-column prop="warehouseSkuStock" align="center" label="剩余库存"/>
      <el-table-column prop="gmtCreate" align="center" label="变化时间">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.gmtCreate | formatTime }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="type" align="center" label="类型">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.type | typeFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="warehouseName" align="center" label="仓库"/>
      <el-table-column prop="adminName" align="center" label="操作人" fixed="right"/>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<style>
.el-table .cell {
  white-space: pre-line;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>

<script>
import { list } from '@/api/warehouseoperlog'
import { listWareHousesByPara } from '@/api/warehouse'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
const typeMap = {
  1: '入库',
  2: '出库',
  3: '盘点',
  4: '损耗',
  5: '调拨',
  6: '减少库存',
  7: '恢复库存',
  8: '退货',
  9: '退库'
}

export default {
  name: 'WarehouseOperLogList',
  components: { Pagination },
  filters: {
    typeFilter(status) {
      return typeMap[status]
    }
  },
  data() {
    return {
      list: undefined,
      total: 0,
      warehouseList: [],
      listLoading: true,
      listQuery: {
        pageNo: 1,
        limit: 20,
        timeInfo: ''
      },
      options: [],
      dataForm: {
        id: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      rules: {}
    }
  },
  created() {
    this.listWareHousesByPara()
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.skuId = this.$route.query.skuId ? this.$route.query.skuId : undefined
      list(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.listQuery.timeInfo = this.listQuery.timeInfo && this.listQuery.timeInfo !== '' ? this.listQuery.timeInfo.join(',') : ''
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        id: undefined
      }
    },
    listWareHousesByPara() {
      this.listQuery.status = 1
      listWareHousesByPara(this.listQuery)
        .then(response => {
          this.warehouseList = response.data.data
        })
        .catch(() => {
          this.warehouseList = []
        })
    }
  }
}
</script>

